<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的宿舍</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
        color: #333;
        padding: 20px;
        }
    .member-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        .member-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .member-card:hover {
            transform: translateY(-10px);
        }

        .member-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            object-fit: cover;        /*保持比例填充容器 */
            margin: 0 auto 15px;
            border: 4px solid var(--secondary-color);
        }
        .bx {
            width: 50%;
            height: 500px;
            object-fit: cover;       /*保持比例填充容器 */
            display: flex;          /* 启用 弹性 布局 */
            float: right;

 }
        .box {
            width: 50%;
            height: 500px;
            object-fit: cover;
            display: flex;          /* 启用弹性布局 */
            justify-content: flex-end; /* 水平右对齐 */
            align-items: flex-start;   /* 垂直顶部对齐 */
 }
</style>

<body>
    <header class="bg-primary text-white text-center py-3">
        <div class="container">
            <h1 class="display-4">宿舍成员</h1>
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav mx-auto">
                            <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
                            <li class="nav-item"><a class="nav-link" href="chengyuan.html">宿舍成员</a></li>
                            <li class="nav-item"><a class="nav-link" href="shenghuo.html">宿舍生活</a></li>
                            <li class="nav-item"><a class="nav-link" href="gushi.html">宿舍故事</a></li>
                            <li class="nav-item"><a class="nav-link" href="guanyv.html">关于我们</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <main>
        <div class="member-grid">
            <!-- 成员1 -->
            <div class="member-card">
                <img src="img/xgz.jpg" alt="徐光宗" class="member-photo">
                <h2>徐光宗</h2>
                <p><i class="fas fa-graduation-cap"></i> 软件技术</p>
                <p><i class="fas fa-heart"></i> 三角洲 | 看电影 | 喝茶</p>
                <p class="signature">「笔记本和茶，总有一个在红温，也可能一起红温」</p>
            </div>

            <!-- 成员2 -->
            <div class="member-card">
                <img src="img/csl.jpg" alt="陈书梁" class="member-photo">
                <h2>陈书梁</h2>
                <p><i class="fas fa-graduation-cap"></i> 软件技术</p>
                <p><i class="fas fa-heart"></i> 打游戏 | 听音乐 | 睡觉</p>
                <p class="signature">「A~U~V,这不我梁哥嘛~」</p>
            </div>

            <!-- 成员3 -->
            <div class="member-card">
                <img src="img/sdc.jpg" alt="司德超" class="member-photo">
                <h2>司德超</h2>
                <p><i class="fas fa-graduation-cap"></i> 软件技术</p>
                <p><i class="fas fa-heart"></i> 阅读 | 打篮球 | 打游戏</p>
                <p class="signature">「书和球，总有一个在手上」</p>
            </div>

            <!-- 成员4 -->
            <div class="member-card">
                <img src="img/zhh.jpg" alt="钟宏贺" class="member-photo">
                <h2>钟宏贺</h2>
                <p><i class="fas fa-graduation-cap"></i> 软件技术</p>
                <p><i class="fas fa-heart"></i> 王者荣耀 | 动画片 | 吃饭</p>
                <p class="signature">「让全体舍友都能听到我亲切的问候」</p>
            </div>

            <!-- 成员5 -->
            <div class="member-card">
                <img src="img/csh.jpg" alt="陈世辉" class="member-photo">
                <h2>陈世辉</h2>
                <p><i class="fas fa-graduation-cap"></i> 软件技术</p>
                <p><i class="fas fa-heart"></i> 羽毛球 | 乒乓球 | 阅读</p>
                <p class="signature">「探索生命的无限可能」</p>
            </div>
    </main>
    
    <div class="qjf">
        <img src="img/tp4.jpg" alt="#" class="bx">
        <img src="img/tp1.jpg" alt="#" class="box">
    </div>

    <footer class="bg-dark text-white text-center py-3">
        <p>&copy; 2025 我们的宿舍. 版权所有.</p>
        <p>联系方式: 1928946480@qq.com</p>
    </footer>
</body>



</html>